<template>
  <div class="parent">
    <div class="title">
      <h1>标题</h1>




    </div>
    <div class="navigate">
      <router-link :to="{ name: 'fuzujian' }" active-class="active">父组件</router-link>
      <router-link to="/home" active-class="active">首页</router-link>
      <router-link :to="{ path: '/news' }" active-class="active">新闻</router-link>
      <router-link :to="{ name: 'guanyu' }" active-class="active">关于</router-link>
      <router-link :to="{ name: 'slotpage' }" active-class="active">插槽</router-link>

    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>

</template>


<script lang="ts" setup>
import { useRouter } from "vue-router"
const router = useRouter()

</script>
<style scoped>
.title {
  text-align: center;
  background: rgb(153, 219, 218);
}

.navigate {
  padding: 0 450px;
  display: flex;
  justify-content: space-around;
  text-align: center;
}

.content {

  margin: 0 auto;
  margin-top: 20px;
  width: 80%;
  height: 500px;
  border: 1px solid red;
}

.active {
  color: yellow;
}
</style>
